<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./public/bootstrap/dist/css/bootstrap.css">
    <style>
        * {
        margin: 0px;
        padding: 0px;
    }

    a {
        text-decoration: none;
    }

    li {
        list-style-type: none;
    }

    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }

    .header {
        width: 100%;
        /* height: 90px; */
        background-color: #090909;
    }

    .head_inner {
        width: 1240px;
        height: 90px;
        margin: 0px auto;
    }

    .logo {
        width: 190px;
        height: 100px;
        background-image: url(public/img/spr-v2.png);
        background-position: 0px -30px;
        margin-top: 5px;
        float: left;
        position: relative;
        z-index: 999;
    }

    .main_nav_wrap {
        float: left;
        /* margin-left: 200px; */
        width: 600px;
        height: 90px;
    }

    .main_nav_wrap ul li {
        width: 120px;
        height: 90px;
        float: left;
    }

    .main_nav_wrap ul li a {
        display: block;
        width: 100%;
        padding-top: 25px;
        font-size: 18px;
        text-align: center;
        color: #fafafa;
        text-decoration: none;
    }

    .main_nav_wrap ul li a span {
        display: block;
        font-size: 10px;
        color: #838383;
    }

    .sub_nav {
        visibility: hidden;
        width: 100%;
        /* height: 190px; */
        padding: 20px 0;
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
        z-index: 1;
        top: 90px;
        left: 0px;
    }

    .sub_nav_inner {
        width: 1040px;
        height: 100%;
        margin: 0px auto;
        padding-left: 93px;
    }

    .sub_nav_inner ul {
        width: 120px;
        float: left;
        text-align: center;
    }

    .sub_nav_inner ul li {
        height: 28px;
        line-height: 28px;
        color: #e1e1e1;
        font-size: 14px;
        cursor: pointer;
    }

    .hot,
    .new {
        display: inline-block;
        width: 14px;
        height: 14px;
        background-image: url(public/img/spr-v2.png);
        vertical-align: middle;
    }

    .hot {
        background-position: -107px 0px;
    }

    .new {
        background-position: -129px 0px;
    }

    .head_right {
        width: 440px;
        height: 90px;
        float: right;
    }

    .head_right .head_search,
    .head_right .head_phone {
        display: inline-block;
        width: 40px;
        margin-left: 5px;
        height: 90px;
        text-align: center;
    }

    .head_right .head_search i,
    .head_right .head_phone i {
        display: inline-block;
        width: 27px;
        height: 27px;
        margin-top: 25px;
        background-image: url(public/img/spr-v2.png);
        cursor: pointer;
    }

    .head_right .head_search i {
        background-position: -8px 0px;
    }

    .head_right .head_phone i {
        background-position: -45px 0px;
    }

    .head_search_main {
        position: absolute;
        width: 440px;
        height: 90px;
        top: 0px;
        background-color: #0b0b0b;
        z-index: 2;
        display: none;
        opacity: 0;
        transition: all 0.5s;
    }

    .head_search_inner {
        position: absolute;
        width: 440px;
        height: 36px;
        background-color: #fff;
        margin-top: 27px;
    }

    .search_inner_icon {
        float: left;
        width: 30px;
        height: 30px;
        margin: 3px 4px 0px;
        background-image: url(public/img/spr-v2.png);
        background-position: -662px -136px;
    }

    .input_search_box {
        float: left;
        border: none;
        width: 368px;
        height: 20px;
        margin-top: 8px;
        font-size: 16px;
        color: #545454;
        line-height: 20px;
    }

    .close_inner_icon {
        float: left;
        width: 28px;
        height: 36px;
        margin-right: 5px;
        background-image: url(public/img/spr-v2.png);
        background-position: -664px -175px;
    }

    .head_search_quick {
        position: absolute;
        width: 420px;
        top: 70px;
        background-color: #fff;
        padding: 15px 10px;
    }

    .head_search_quick h5 {
        color: #a4a4a4;
        font-size: 12px;
        line-height: 30px;
        height: 30px;
        padding-left: 30px;
        display: block;
    }

    .head_search_quick a {
        width: 370px;
        height: 30px;
        padding-left: 50px;
        line-height: 30px;
        color: #696969;
        display: block;
        font-size: 14px;
    }

    .head_user_info,.top_user_info{
        display: inline-block;
        
        width: 340px;
        height: 100%;
        float: right;
    }
    .top_user_info{
        display: none;
    }
    .head_user_info .head_user_side, .top_user_side{
        float: left;
        width: 100px;
        height: 90px;
        position: relative;
    }

    .head_user_info .head_user_side span,.top_user_side span{
        display: inline-block;
        width: 74px;
        height: 74px;
        margin-top: 8px;
        margin-left: 13px;
        background-image: url(public/img/spr-v2.png);
        background-position: 0px -169px;
        position: relative;
        z-index: 1;
    }

    .head_user_side img,.top_user_side img{
        position: absolute;
        top: 12px;
        left: 18px;
        width: 66px;
        height: 66px;
        border-radius: 50%;
    }

    .head_user_main ,.top_user_main {
        width: 240px;
        height: 50px;
        padding-top: 18px;
        margin-left: 100px;
    }

    .head_user_unlogin,.top_user_unlogin {
        width: 100%;
        height: 19px;
        padding: 5px 0px;
        color: #fff;
    }
    .top_user_unlogin {
        font-size: 24px;
    }
    .head_user_unlogin em {
        text-decoration: underline;
        color: #dfb257;
        margin: 0px 3px;
        font-style: normal;
        cursor: pointer;
    }

    .head_user_tips,.top_user_tips {
        width: 100%;
        height: 19px;
        padding: 5px 0px;
        color: #999;
        font-size: 12px;
    }
    .top_user_tips span{
        float: right;
        margin-right: 20px;
        font-size: 16px;
        cursor: pointer;
    }
    .head_user_drop {
        display: none;
        position: absolute;
        width: 340px;
        margin-left: 100px;
        padding-top: 20px;
        background-color: rgba(27, 27, 27, 0.9);
        z-index: 999;
    }

    .head_user_drop_tips {
        width: 290px;
        height: 38px;
        padding: 10px 30px 56px 55px;
        font-size: 14px;
        color: #868686;
    }

    .head_link_personal {
        background-color: #161413;
        width: 340px;
        height: 36px;
        font-size: 12px;
        text-align: center;
        color: #e0e0e0;
        line-height: 36px;
        /* display: none; */
    }
    .head_link_personal span{
        cursor: pointer;
    }
    .rgba9 {
        background-color: rgba(27, 27, 27, 0.9);
    }

    .banner {
        width: 100%;
        height: 350px;
        background: url(public/img/pic-back-v14.jpg) no-repeat center -10px;
        transition: all 0.8s ease;
        border-bottom: 2px solid #8c6c2d;
    }

    .banner_connect {
        width: 1240px;
        margin: 0px auto;
        height: 100%;
        position: relative;
    }

    .game_version {
        position: absolute;
        bottom: 30px;
        right: 0px;
        font-size: 14px;
        color: #888787;
    }

    .game_version em {
        font-style: normal;
        margin-right: 10px;
        color: #f5d185;
    }

    .game_version span {
        display: inline-block;
        height: 22px;
        padding: 0px 15px;
        line-height: 22px;
        font-size: 12px;
        color: #f5d185;
        border: 2px solid #f5d185;
        background-color: rgba(0, 0, 0, 0.65);
        text-align: center;
    }


    .mask{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 9999;
        background-color: rgba(230, 245, 255,0.7);
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        display: none;
    }
    .mask .login_box,.mask .register_box{
        width: 618px;
        height: 364px;
        background-color: white;
        margin: 0 auto;
        position: relative;
        /*display: none;*/
    }
    .mask .register_box{
        display: none;
    }
    .mask .close{
        width: 45px;
        height: 23px;
        background: url(public/img/icon.png)-221px -126px no-repeat;
        float: right;
        margin-top: 1px;
        margin-right: 1px;
        cursor: pointer;
    }
    .mask .close:hover{
        background: url(public/img/icon.png)-221px -150px no-repeat;
    }
    .mask_login{
        width: 
    }
    .login_title{
        text-align: center;
        height: 30px;
        margin-top: 40px;
        font-size: 1.3em;
        color: #333;
        margin-bottom: 16px;
    }
    .username,.password,.reg_username,.reg_password{
        width: 272px;
        height: 42px;
        background: url(public/img/icon.png) -1px -1px no-repeat;
        margin: 20px auto;
    }
    /*.username,.password*/
    .username input,.password input,.reg_username input,.reg_password input{
        width: 258px;
        position: relative;
        top: 2px;
        left: 2px;
        height: 18px;
        padding: 10px 0 10px 10px;
        line-height: 18px;
        color: #333;
        font-size: 16px;
        outline: none;
        border: none;
    }
    .login,.register{
        width: 268px;
        height: 40px;
        background-color: #86ce2f;
        margin: 0 auto;
    }
    .login input,.register input{
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        background: none;
        border: none;
        outline: none;
        font-size: 16px;
        cursor: pointer;
    }
    .maks_font{
        height: 16px;
        position: absolute;
        bottom: 8px;
        right: 8px;
        font-size: 12px;
        color: #666;
    }
    .maks_font span{
        margin-right: 3px;
        cursor: pointer;
    }

    .footer {
            width: 100%;
            height: 155px;
            padding: 30px 0px;
            background-color: red;
            background: url(http://ossweb-img.qq.com/images/lol/v2/bg-footer.jpg) no-repeat center top;
        }

        .footer_content {
            padding-left: 380px;
            width: 1240px;
            color: #A5A5A5;
            font-size: 11px;
            margin: 0 auto;
        }

        .footer_content ul {
            float: right;
        }

        .footer_content ul li {
            height: 19px;
            line-height: 19px;
        }

        .footer_content ul li:nth-of-type(1),
        .footer_content ul li:nth-of-type(2) {
            color: #568193;
        }

        .footer_content ul li:nth-of-type(3),
        .footer_content ul li:nth-of-type(4) {
            color: #415967;
        }

        .footer_content ul li:nth-of-type(5) span {
            color: #568193;
        }

        .text_info {
            margin-top: 450px;
            margin-bottom: 50px;
        }

        html,
        body {
            background-color: #F7F8F8;
        }

        .C_content {
            width: 1238px;
            margin: 0px auto;
        }

        .icon {
            display: inline-block;
            vertical-align: middle;
            background-repeat: no-repeat;
        }

        .house {
            width: 16px;
            height: 14px;
            background: url('./public/img/page.png') -830px -0px;
        }

        .top {
            padding: 30px 0px;
            font-size: 14px;
        }

        .top a {
            text-decoration: none;
            border-bottom: 1px dotted #333333;
            color: #333333;
        }

        .lg {
            width: 8px;
            height: 9px;
            background: url('./public/img/page.png') -830px -17px;
        }

        .hbanner {
            position: relative;
            overflow: hidden;
        }

        .hbanner .banBac {
            overflow: hidden;
            /* width: 800%; */
            height: 632px;
        }

        .hbanner .banBac::after {
            content: '';
            display: block;
            clear: both;
        }

        .hbanner ul li {
            list-style-type: none;
            float: left;
            width: 1238px;
        }

        .hbanner .banBac {
            /* width:  */
            transition: all .5s;
        }

        .hbanner .banBac li {
            overflow: hidden;
        }

        .hbanner .banBac li img {
            width: 100%;
            display: block;
        }

        .hbanner .banAvata {
            position: absolute;
            bottom: 10px;
            right: 30px;
            /* width: */
        }

        .hbanner .banAvata::after {
            content: '';
            display: block;
            clear: both;
        }

        .hbanner .banAvata li {
            width: 60px;
            height: 60px;
            float: left;
            position: relative;
        }

        .avaBor::before {
            content: '';
            position: absolute;
            display: block;
            border: 3px solid #00A483;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            top: 0px;
            left: 0px;
        }

        .hbanner .banAvata img {
            box-sizing: padding-box;
            width: 100%;
            height: 100%
        }


        .heroinfo {
            position: absolute;
            color: #ffffff;
            top: 0px;
            width: 50%;
            padding: 60px 40px;
        }

        .heroinfo>.h1 {
            font-size: 40px;
            font-weight: 900;
        }

        .heroinfo>.h2 {
            font-size: 26px;
            font-weight: 700;
        }

        .heroinfo>.label {
            display: inline-block;
            background-color: #00A483;
            padding: 2px 5px;
            border-radius: 3px;
            font-size: 12px;
        }

        .heroinfo>.infolist {
            margin-top: 100px;
        }

        .heroinfo>.infolist>li {
            font-size: 13px;
            line-height: 25px;
        }

        .heroinfo>.infolist::after {
            content: '';
            display: block;
            clear: both;
        }

        .heroinfo>.infolist>li>span {
            display: inline-block;
            padding-right: 10px;
        }

        .heroinfo>.infolist>li>p {
            display: inline-block;
            height: 13px;
            width: 150px;
            vertical-align: middle;
            background-color: #363C3C;
        }

        .heroinfo>.infolist>li>p>span {
            display: block;
            height: 100%;
            transition: all .5s;
        }

        .heroinfo>.infolist>:nth-of-type(1)>p>span {
            width: 0%;
            background-color: #F2C500;
        }

        .heroinfo>.infolist>:nth-of-type(2)>p>span {
            width: 0%;
            background-color: #F59D00;
        }

        .heroinfo>.infolist>:nth-of-type(3)>p>span {
            width: 0%;
            background-color: #2C97DE;
        }

        .heroinfo>.infolist>:nth-of-type(4)>p>span {
            width: 0%;
            background-color: #1ECA6B;
        }

        .heroinfo>.buy-btn {
            height: 41px;
            width: 152px;
            background: url('./public/img/page.png') -638px -0px;
            margin-top: 30px;
        }

        .down .title {
            color: #00A483;
            font-size: 18px;
            font-weight: 700;
            padding: 20px 0px;
        }
        #myTabContent>div {
            background-color: #ffffff;
        }
        .nav > li > a{
            padding: 6px 9px;
        }
        .nav > .active{
            border-top: 3px solid #00A483;
        }
        .banAvata>p{
            text-align: right;
        }
        .skin_name{
            
            padding: 5px 6px;
            background-color: rgba(0, 0, 0, .5);
            color: #ffffff;
            display: inline-block
        }
        #bd{
            width: 50%;
            padding: 20px;
        }
        .tab_nav{
            width: 50%;
        }
    </style>
</head>

<body>


<div class="mask">
    <div class="login_box">
        <div class="close"></div>
        <div class="login_title">账号密码登录</div>
        <div class="username">
            <input type="text" id="username" value="zhangsan" placeholder="用户名" name="">
        </div>
        <div class="password">
            <input type="password" id="password" value="123456" placeholder="密码" name="">
        </div>
        <div class="login">
            <input type="button" id="login" value="登 录" name="">
        </div>
        <div class="maks_font">
            <span>忘了密码？</span>
            <span> | </span>
            <span id="go_register">注册新账号</span>
        </div>
    </div>
    <div class="register_box">
        <div class="close"></div>
        <div class="login_title">注册新账号</div>
        <div class="reg_username">
            <input type="text" id="reg_username" placeholder="用户名" name="">
        </div>
        <div class="reg_password">
            <input type="password" id="reg_password" placeholder="密码" name="">
        </div>
        <div class="register">
            <input type="button" value="立 即 注 册" name="">
        </div>
        <div class="maks_font">
            <span>忘了密码？</span>
            <span> | </span>
            <span id="go_login">已有账号 去登录</span>
        </div>
    </div>
</div>
<div class="header">
    <div class="head_inner clearfix">
        <div class="logo"></div>
        <div class="main_nav_wrap">
            <ul class="clearfix" id="nav_ul">
                <li>
                    <a href="">
                        游戏资料
                        <span>GAME INFO</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        商城/合作
                        <span>STORE</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        用户互动
                        <span>COMMUNITY</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        赛事中心
                        <span>EVENTS</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        自助系统
                        <span>SYSTEM</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="sub_nav" id="sub_nav">
            <div class="sub_nav_inner">
                <ul>
                    <li>新手指引</li>
                    <li>
                        <i class="hot"></i> 资料库
                    </li>
                    <li>攻略中心</li>
                    <li>模式实验室</li>
                    <li>海克斯战利品库</li>
                    <li>屏保下载</li>
                    <li>
                        <i class="new"></i>宇宙官网
                    </li>
                </ul>
                <ul>
                    <li>点券充值</li>
                    <li>道聚城</li>
                    <li>
                        <i class="hot"></i>周边商城
                    </li>
                    <li>LOL桌游</li>
                    <li>LOL信用卡</li>
                    <li>网吧特权</li>
                </ul>
                <ul>
                    <li>在线客服</li>
                    <li>视频中心</li>
                    <li>官方论坛</li>
                    <li>官方微信</li>
                    <li>官方微博</li>
                </ul>
                <ul>
                    <li>
                        <i class="new"></i>全球总决赛
                    </li>
                    <li>
                        <i class="hot"></i>LPL职业联赛
                    </li>
                    <li>德玛西亚杯</li>
                    <li>城市争霸赛</li>
                    <li>高校联赛</li>
                    <li>LDL发展联赛</li>
                    <li>高校自发赛</li>
                </ul>
                <ul>
                    <li>点亮图标</li>
                    <li>
                        <i class="hot"></i>封号查询
                    </li>
                    <li>体验服申请</li>
                    <li>回放系统</li>
                    <li>服务器状态查询</li>
                    <li>裁决之镰</li>
                    <li>
                        <i class="new"></i>峡谷之巅
                    </li>
                </ul>
            </div>
        </div>
        <div class="head_right clearfix">
            <span class="head_search" id="search">
                <i></i>
            </span>
            <div class="head_search_main" id="search_main">
                <div class="head_search_inner">
                    <i class="search_inner_icon"></i>
                    <input type="text" class="input_search_box" placeholder="搜索 lol.qq.com">
                    <i class="close_inner_icon" id="inner_close"></i>
                </div>
                <div class="head_search_quick">
                    <h5>快速链接</h5>
                    <a href="">全球总决赛</a>
                    <a href="">新皮肤</a>
                    <a href="">RNG</a>
                    <a href="">季前赛</a>
                    <a href="">奥恩</a>
                </div>
            </div>

            <span class="head_phone">
                <i></i>
            </span>
            <div class="top_user_info">
                <div class="top_user_side">
                    <span></span>
                    <img id="user_img" src="http://ossweb-img.qq.com/images/lol/img/profileicon2/profileicon780.jpg" alt="">
                </div>
                <div class="top_user_main">
                    <div class="top_user_unlogin">
                        <span id="user_name">张三
                        </span>
                    </div>
                    <div class="top_user_tips">
                        <span id="close">注销</span>
                    </div>
                </div>
            </div>
            <div class="head_user_info" id="user_info">
                <div class="head_user_side">
                    <span></span>
                    <img src="public/img/default.png" alt="">
                </div>
                <div class="head_user_main">
                    <div class="head_user_unlogin">
                        <span>亲爱的召唤师，欢迎
                            <em id="go_login_mask">登录</em>
                        </span>
                    </div>
                    <div class="head_user_tips">
                        <span>登录后查看自己的战绩、资产、声望值等</span>
                    </div>
                </div>
            </div>
            <div class="head_user_drop" id="user_drop">
                <div class="head_user_drop_tips">
                    登录后才可查看您的具体信息哦~（包括战绩、资产、声望值等）
                </div>
                <div class="head_link_personal">
                    <span>进入个人中心</span>
                </div>
            </div>
        </div>
    </div>
    <div class="banner" id="banner">
        <div class="banner_connect">
            <div class="game_version">
                当前游戏版本：
                <em>Ver 7.24</em>
                <span style="cursor: pointer;">版本详情</span>
            </div>
        </div>
    </div>
</div>
    



    <div class="C_content">
        <div class="top">
            <i class="icon house"></i>
            <a href="#">英雄联盟首页</a>
            <i class="icon lg"></i>
            <a href="#">游戏资料</a>
            <i class="icon lg"></i>
            <a href="#">英雄资料</a>
            <i class="icon lg"></i>
            <span>{{$datas[0].big_name}} {{$datas[0].name}}</span>
        </div>
        <div class="C_center">
            <div class="hbanner">
                <!-- 背景轮播图 -->
                <ul class="banBac">
                    <li data-size="-1">
                        <img src="{{$datas[0].big_img}}" alt="">
                    </li>
                    {{foreach $datas as $data}}
                    <li>
                        <img src="{{$data.simg}}" alt="">
                    </li>
                    {{/foreach}}
                    <!-- <li>
                        <img src="http://ossweb-img.qq.com/images/lol/web201310/skin/big266000.jpg" alt="">
                    </li>
                    <li>
                        <img src="http://ossweb-img.qq.com/images/lol/web201310/skin/big266001.jpg" alt="">
                    </li>
                    <li>
                        <img src="http://ossweb-img.qq.com/images/lol/web201310/skin/big266002.jpg" alt="">
                    </li>
                    <li>
                        <img src="http://ossweb-img.qq.com/images/lol/web201310/skin/big266003.jpg" alt="">
                    </li> -->
                </ul>
                <!-- 英雄信息 -->
                <div class="heroinfo">
                    <!-- <h3>暗裔剑魔</h3> -->
                    
                    <p class="h1">{{$datas[0].big_name}}</p>
                    <p class="h2">{{$datas[0].name}}</p>
                    <span class="label">{{$type.type}}</span>
                    <ul class="infolist">
                        <li>
                            <span>物理攻击</span>
                            <p>
                                <span style="width:{{$datas[0].physics*2}}0%"></span>
                            </p>
                        </li>
                        <li>
                            <span>魔法攻击</span>
                            <p>
                                <span style="width:{{$datas[0].magic*2}}0%"></span>
                            </p>
                        </li>
                        <li>
                            <span>防御能力</span>
                            <p>
                                <span style="width:{{$datas[0].live*2}}0%"></span>
                            </p>
                        </li>
                        <li>
                            <span>上手难度</span>
                            <p>
                                <span style="width:{{$datas[0].difficulty*2}}0%"></span>
                            </p>
                        </li>
                    </ul>

                    <div class="btn buy-btn">

                    </div>
                </div>
                <!-- 右下角小头像 -->
                <ul class="banAvata">
                    <p> <span class="skin_name"></span> </p>

                        <li data-size="-1" data-name="{{$datas[0].big_name}} {{$datas[0].name}}">
                            <img src="{{$datas[0].img}}" alt="">
                        </li>
                     {{foreach $datas as $data}}
                     
                    <li data-size="{{$data@index}}" data-name="{{$data.sname}}">
                        <img src="{{$data.smimg}}" alt="">
                    </li>
                    {{/foreach}}
                    <!-- <li data-size="0" class="avaBor">
                        <img src="http://ossweb-img.qq.com/images/lol/web201310/skin/small266000.jpg" alt="">
                    </li>
                    <li data-size="1">
                        <img src="http://ossweb-img.qq.com/images/lol/web201310/skin/small266001.jpg" alt="">
                    </li>
                    <li data-size="2">
                        <img src="http://ossweb-img.qq.com/images/lol/web201310/skin/small266002.jpg" alt="">
                    </li>
                    <li data-size="3">
                        <img src="http://ossweb-img.qq.com/images/lol/web201310/skin/small266003.jpg" alt="">
                    </li> -->
                </ul>
            </div>
        </div>
        <div class="down">
            <div class="left">
                <div class="story">
                    <p class="title">背景故事</p>
                    <div>
                        <ul class="nav nav-tabs tab_nav">
                            <li role="presentation" class="active">
                                <a href="#bd">
                                    <img src="{{$skill.passive_img}}" alt="">
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#q">
                                    <img src="{{$skill.q_img}}" alt="">
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#w">
                                    <img src="{{$skill.w_img}}" alt="">
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#e">
                                    <img src="{{$skill.e_img}}" alt="">
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#r">
                                    <img src="{{$skill.r_img}}" alt="">
                                </a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="bd">
                                <p>{{$skill.pdescribe}}</p>
                            </div>
                            <div class="tab-pane fade" id="q">
                                <p>
                                    {{$skill.qdescribe}}
                                </p>
                            </div>
                            <div class="tab-pane fade" id="w">
                                <p>{{$skill.wdescribe}}</p>
                            </div>
                            <div class="tab-pane fade" id="e">
                                <p>
                                    {{$skill.edescribe}}
                                </p>
                            </div>
                            <div class="tab-pane fade" id="r">
                                <p>
                                    {{$skill.rdescribe}}
                                </p>
                            </div>

                        </div>


                        <div class="">

                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_content clearfix">
            <ul>
                <li>腾讯互动娱乐 | 服务条款 | 广告服务 | 腾讯游戏招聘 | 腾讯游戏客服 | 游戏活动 | 游戏地图 | 商务合作 | 腾讯网 | 网站导航</li>
                <li>腾讯公司版权所有</li>
                <li>COPYRIGHT © 1998 - 2017 TENCENT. ALL RIGHTS RESERVED.</li>
                <li>© 2012 Riot Games, Inc. ALL RIGHTS RESERVED.</li>
                <li>文网进字[2011] 004号 & ISBN 978-7-89989-145-2
                    <span>| 新出网证（粤）字010号 | 粤网文【2017】6138-1456号</span>
                </li>
            </ul>
        </div>
    </div>
</body>

<script src="./public/jquery/jquery.js"></script>
<script src="./public/bootstrap/dist/js/bootstrap.js"></script>

</html>

<script>
    let dom = document.querySelectorAll('.banAvata li')
    let size = 1238 * (dom.length+1);
    dom[0].setAttribute('class','avaBor')
    document.querySelector('.skin_name').innerHTML = dom[0].dataset.name;
    document.querySelector('.banBac').style.width = size + "px";
    // console.log(dom)
    let dclick = function (e) {
        // console.log(this)
        for (let i = 0, dl = dom.length; i < dl; i++) {
            // 删除全部avaBor
            dom[i].classList.remove('avaBor')
        }
        // 给当前dom添加avaBor
        this.setAttribute('class', 'avaBor')
        let a = this.dataset.size
        a = parseInt(a) + 1
        let b = a * 1238;
        // console.log(b)
        let name = this.dataset.name
        document.querySelector('.banBac').style.marginLeft = -b + 'px';
        document.querySelector('.skin_name').innerHTML = name
        // console.log(a)
        // console.log(this.nodeName)avaBor

    }
    for (let i = 0, dl = dom.length; i < dl; i++) {
        dom[i].addEventListener('click', dclick)
    }

    $('.tab_nav a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });


    
    (function (dom) {
            let domEle = {
                nav_ul: dom.getElementById('nav_ul'),
                sub_nav: dom.getElementById('sub_nav'),
                search: dom.getElementById('search'),
                search_main: dom.getElementById('search_main'),
                inner_close: dom.getElementById('inner_close'),
                user_info: dom.getElementById('user_info'),
                user_drop: dom.getElementById('user_drop'),
                banner: dom.getElementById('banner'),
                carousel: dom.getElementById('carousel'),
                usernameDiv: dom.querySelector('.username'),
                pwdDiv: dom.querySelector('.password'),
                username: dom.querySelector('#username'),
                pwd: dom.querySelector('#password'),
                reg_usernameDiv: dom.querySelector('.reg_username'),
                reg_pwdDiv: dom.querySelector('.reg_password'),
                reg_username: dom.querySelector('#reg_username'),
                reg_pwd: dom.querySelector('#reg_password'),
                go_login: dom.querySelector('#go_login'),
                go_register: dom.querySelector('#go_register'),
                login_box: dom.querySelector('.login_box'),
                register_box: dom.querySelector('.register_box'),
                close: dom.querySelectorAll('.close'),
                mask: dom.querySelector('.mask'),
                go_login_mask: dom.querySelector('#go_login_mask')
            }
            let domFun = {
                nav_ul_addELFun: function (dom, event) {
                    dom.addEventListener(event, function () {
                        if (domEle.sub_nav.style.visibility == "visible") {
                            domEle.sub_nav.style.visibility = 'hidden';
                        } else {
                            domEle.sub_nav.style.visibility = 'visible';
                        }
                    })
                },
                sub_nav_VisFun: function () {
                    domFun.nav_ul_addELFun(domEle.nav_ul, 'mouseover');
                    domFun.nav_ul_addELFun(domEle.nav_ul, 'mouseout');
                    domFun.nav_ul_addELFun(domEle.sub_nav, 'mouseover');
                    domFun.nav_ul_addELFun(domEle.sub_nav, 'mouseout');
                },
                search_main_DisFun: function () {
                    domEle.search.addEventListener('click', function () {
                        setTimeout(function () {
                            domEle.search_main.style.opacity = 1;
                        }, 0)
                        domEle.search_main.style.display = "block";
                    })
                    domEle.inner_close.addEventListener('click', function () {
                        domEle.search_main.style.opacity = 0;
                        setTimeout(function () {
                            domEle.search_main.style.display = "none";
                        }, 500)
                    })
                },
                user_info_addELFun: function (dom, event) {
                    dom.addEventListener(event, function () {
                        if (domEle.user_drop.style.display == "block") {
                            domEle.user_drop.style.display = "none";
                        } else {
                            domEle.user_drop.style.display = "block";
                        }
                        domEle.user_info.classList.toggle("rgba9");
                    })
                },
                user_info_moo: function () {
                    domFun.user_info_addELFun(domEle.user_info, 'mouseover');
                    domFun.user_info_addELFun(domEle.user_info, 'mouseout');
                    domFun.user_info_addELFun(domEle.user_drop, 'mouseover');
                    domFun.user_info_addELFun(domEle.user_drop, 'mouseout');
                },
                
                hero_nav_Hover: function () {
                    let hero_nav = dom.getElementsByClassName('hero_nav');
                    let hero_content = dom.getElementsByClassName('hero_content');
                    for (let i = 0; i < hero_nav.length; i++) {
                        hero_nav[i].addEventListener('mouseover', function () {
                            for (let i = 0; i < hero_nav.length; i++) {
                                hero_nav[i].classList.remove('current');
                                hero_content[i].style.display = 'none';
                            }
                            hero_nav[i].classList.add('current');
                            hero_content[i].style.display = 'block';
                        })
                    }
                },
                hero_img_Hover: function () {
                    let hero_img = dom.getElementsByClassName('hero_img');
                    let hero_mask = dom.getElementsByClassName('hero_mask');
                    for (let i = 0; i < hero_img.length; i++) {
                        hero_img[i].addEventListener('mouseover', function () {
                            hero_mask[i].style.display = 'block';
                        })
                        hero_img[i].addEventListener('mouseout', function () {
                            hero_mask[i].style.display = 'none';
                        })
                        hero_mask[i].addEventListener('mouseover', function () {
                            hero_mask[i].style.display = 'block';
                        })
                        hero_mask[i].addEventListener('mouseout', function () {
                            hero_mask[i].style.display = 'none';
                        })
                    }
                },
                consultation_nav_Fun: function () {
                    let consultation_nav = dom.getElementsByClassName('consultation_nav');
                    let news_content = dom.getElementsByClassName('news_content');
                    for (let i = 0; i < consultation_nav.length; i++) {
                        consultation_nav[i].addEventListener('mouseover', function () {
                            for (let j = 0; j < news_content.length; j++) {
                                consultation_nav[j].classList.remove('current');
                                news_content[j].style.display = "none";
                            }
                            consultation_nav[i].classList.add('current');
                            news_content[i].style.display = "block";
                        })
                    }
                },
                news_hover_Fun: function () {
                    let news_item = dom.getElementsByClassName('news_item');
                    let news_type = dom.getElementsByClassName('new_type');
                    for (let i = 0; i < news_item.length; i++) {
                        news_item[i].addEventListener('mouseover', function () {
                            news_item[i].style.color = "#d1ab57";
                            news_type[i].classList.add('news_current');
                        })
                        news_item[i].addEventListener('mouseout', function () {
                            news_item[i].style.color = "#555555";
                            news_type[i].classList.remove('news_current');
                        })
                    }
                },
                loginFun: function () {
                    domEle.username.addEventListener('focus', function () {
                        domEle.usernameDiv.style.backgroundPosition = "-1px -45px";
                    })
                    domEle.username.addEventListener('blur', function () {
                        domEle.usernameDiv.style.backgroundPosition = "-1px -1px";
                    })
                    domEle.pwd.addEventListener('focus', function () {
                        domEle.pwdDiv.style.backgroundPosition = "-1px -45px";
                    })
                    domEle.pwd.addEventListener('blur', function () {
                        domEle.pwdDiv.style.backgroundPosition = "-1px -1px";
                    })

                    domEle.reg_username.addEventListener('focus', function () {
                        domEle.reg_usernameDiv.style.backgroundPosition = "-1px -45px";
                    })
                    domEle.reg_username.addEventListener('blur', function () {
                        domEle.reg_usernameDiv.style.backgroundPosition = "-1px -1px";
                    })
                    domEle.reg_pwd.addEventListener('focus', function () {
                        domEle.reg_pwdDiv.style.backgroundPosition = "-1px -45px";
                    })
                    domEle.reg_pwd.addEventListener('blur', function () {
                        domEle.reg_pwdDiv.style.backgroundPosition = "-1px -1px";
                    })

                    domEle.go_register.addEventListener('click', function () {
                        domEle.login_box.style.display = 'none';
                        domEle.register_box.style.display = 'block';
                    })
                    domEle.go_login.addEventListener('click', function () {
                        domEle.login_box.style.display = 'block';
                        domEle.register_box.style.display = 'none';
                    })
                    // console.log(close.length)
                    for (let i = 0; i < domEle.close.length; i++) {
                        domEle.close[i].addEventListener('click', function () {
                            domEle.mask.style.display = 'none';
                        })
                    }
                    domEle.go_login_mask.addEventListener('click', function () {
                        domEle.mask.style.display = 'flex';
                    })
                }
            }
            domFun.sub_nav_VisFun();
            domFun.search_main_DisFun();
            domFun.user_info_moo();
            // domFun.bannerOnscroll();
            // domFun.carouselFun();
            domFun.hero_nav_Hover();
            domFun.hero_img_Hover();
            domFun.consultation_nav_Fun();
            domFun.news_hover_Fun();
            domFun.loginFun();
        })(document)




</script>